<template>
	<view class="edit_personal_info_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.edit.title')"/>
		<view class="edit_personal_info_content">
			<view class="_info_content_item">
				<view class="_info_content_item_title">{{$t('common.avatar')}}</view>
				<view class="_info_content_item_photo">
					<up-image src="/static/logo.png" width="50" height="50" bgColor="#f1f6ff00" shape="circle"></up-image>
					<!-- <view class="_info_content_item_left">
						<up-image src="/static/comm/right_2.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle" @click=""></up-image>
					</view> -->
				</view>
			</view>
			<view class="_info_content_item_fg"></view>
			<view class="_info_content_item">
				<view class="_info_content_item_title">{{$t('common.nickname')}}</view>
				<view class="_info_content_item_photo" @click="jumpInfo('name')">
					<view class="_info_content_item_value">{{userData.name || $t("common.no")}}</view>
					<!-- <view class="_info_content_item_left">
						<up-image src="/static/comm/right_2.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle" ></up-image>
					</view> -->
				</view>
			</view>
			<view class="_info_content_item_fg"></view>
			<view class="_info_content_item">
				<view class="_info_content_item_title">{{$t("common.mobile")}}</view>
				<view class="_info_content_item_photo">
					<view class="_info_content_item_value">{{userData.mobile}}</view>
					<!-- <view class="_info_content_item_left">
						<up-image src="/static/comm/right_2.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle" @click="jumpInfo('mobile')"></up-image>
					</view> -->
				</view>
			</view>
			<view class="_info_content_item_fg"></view>
			<view class="_info_content_item">
				<view class="_info_content_item_title">{{$t('common.email')}}</view>
				<view class="_info_content_item_photo" @click="jumpInfo('email')">
					<view class="_info_content_item_value">{{userData.email || $t("common.no")}}</view>
					<!-- <view class="_info_content_item_left">
						<up-image src="/static/comm/right_2.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle"></up-image>
					</view> -->
				</view>
			</view>
			<view class="_info_content_item_fg"></view>
		</view>
		<!-- 修改昵称 -->
		<up-modal :show="openEditShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openEditShow=false;">
					<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">{{$t('mine.edit.nickname')}}</view>
					<view class="content_2"></view>
					<up-input
					    :placeholder="$t('mine.edit.nickname.placeholder')"
					    border="surround"
					    v-model="editForm.name"
						:customStyle="inputCss"
					  ></up-input>
				</view>
				<view class="but_">
					<view class="but_copy" @click="updateOk">{{$t('common.confirm')}}</view>
					<view class="but_close" @click="openEditShow=false;">{{$t('mine.edit.no')}}</view>
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getStorageFun,USER_DATA } from '@/utils/auth.js';
	
	export default {
		components:{Header},
		data() {
			return {
				openEditShow:false,// 修改昵称
				editForm:{
					name:null
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				userData:{},// 当前用户对象
			};
		},
		onShow() {
			this.userData = getStorageFun(USER_DATA);
		},
		methods: {
			jumpInfo(key) {
				if(!key){
					return;
				}
				let path = "";
				if(key === "name"){
					this.openEditShow = true;
					return;
				}else if(key="email"){
					path = "/pages/edit_personal_info_email/edit_personal_info_email";
				}
				uni.navigateTo({
					url:path,
				})
			},
			// 确认修改昵称
			updateOk(){
				const params=this.editForm;
				this.openEditShow = false;
			}
		}
	}
</script>

<style lang="scss">
.edit_personal_info_warp{
	height: calc(100vh - 0rpx);
	.edit_personal_info_content{
		padding: 30rpx;
	}
	._info_content_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 500;
		font-size: 30rpx;
		padding: 20rpx 0;
		._info_content_item_photo{
			display: flex;
			align-items: center;
		}
		._info_content_item_left{
			margin-left: 20rpx;
		}
		._info_content_item_title{
			color: #222222;
		}
		._info_content_item_title{
			color: #999999;
		}
	}
	._info_content_item_fg{
		margin: 20rpx 0;
		height: 1rpx;
		width: 100%;
		border-top: 1rpx solid #EEEEEE;
	}
}
</style>
